
import '@/styles/ComponentMarket.scss';
import { DownOutlined } from '@ant-design/icons';
import { Button, Dropdown, Input, Menu} from 'antd';
import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import AddchengyuanForm from '../dacuang/chengyuan/AddchengyuanForm/AddchengyuanForm';

const { Search } = Input;

const categoriesMap: { [key: string]: string[] } = {
  '/dachuang': [
    '全部', '明星项目', '大创标签', '大创标签', '大创标签', 
    '大创标签', '大创标签', '大创标签', '大创标签', '大创标签', '大创标签'
  ],
  '/moxing': [
    '全部', '语音识别', '语音合成', '语音扩展', '人脸识别',
    '文本识别', '图像识别', '基础任务', '模型类别', '模型类别', '模型类别'
  ],
  '/shuju': [
    '全部', '我的', '计算机视觉', '自然语言处理', '多模态',
    '深度学习', '音频识别', '其他数据集', '其他数据集', '其他数据集'
  ],
  '/yingyong': [
    '官方', '社交娱乐', '专业知识', '内容媒体', '效率工具',
    '企业服务', '营销电商', '政务服务', '医疗健康', '智能硬件', '更多'
  ],
  '/zujian': [
    '全部', '实用工具', '文本处理', '图像处理', '音频处理',
    '网页搜索', '科学教育', '组件标签', '组件标签', '组件标签', '组件标签'
  ],
  '/dachuang/chengyuan': [
    '官方', '社交娱乐', '专业知识', '内容媒体', '效率工具',
    '教育培训', '企业服务', '营销电商', '政务服务', '医疗健康', '智能硬件'
  ],
  '/dachuang/saishi': [
    '全部', '社交娱乐', '专业知识', '内容媒体', '效率工具',
    '教育培训', '企业服务', '营销电商', '政务服务', '医疗健康', '智能硬件'
  ],
  '/dachuang/zhushou': [
    '官方', '社交娱乐', '专业知识', '内容媒体', '效率工具',
    '教育培训', '企业服务', '营销电商', '政务服务', '医疗健康', '智能硬件'
  ],
  '/dachuang/luntan': [
    '官方', '社交娱乐', '专业知识', '内容媒体', '效率工具',
    '教育培训', '企业服务', '营销电商', '政务服务', '医疗健康', '智能硬件'
  ]
};

const buttonTextMap: { [key: string]: string } = {
  '/moxing': '创建应用',
  '/shuju': '创建数据集',
  '/yingyong': '创建应用',
  '/dachuang/chengyuan': '我要招募',
  '/dachuang/zhushou': '创建应用',
  '/dachuang/luntan': '我要发帖'
};

interface ComponentMarketProps {
  children?: React.ReactNode;
}

const ComponentMarket: React.FC<ComponentMarketProps> = ({ children }) => {
  const location = useLocation();
  const [selectedCategory, setSelectedCategory] = useState('');
  const [isModalVisible, setIsModalVisible] = useState(false);

  useEffect(() => {
    if (categoriesMap[location.pathname]) {
      setSelectedCategory(categoriesMap[location.pathname][0]);
    }
  }, [location.pathname]);

  const handleCategoryClick = (category: string) => {
    setSelectedCategory(category);
  };

  const menu = (
    <Menu>
      {categoriesMap[location.pathname]?.slice(8).map((category, index) => (
        <Menu.Item key={index} onClick={() => handleCategoryClick(category)}>
          {category}
        </Menu.Item>
      ))}
    </Menu>
  );

  const getTitle = () => {
    switch (location.pathname) {
      case '/dachuang': return '大创广场 > 项目展示';
      case '/moxing': return '模型广场';
      case '/shuju': return '数据广场';
      case '/yingyong': return '应用广场';
      case '/zujian': return '组件广场';
      case '/dachuang/chengyuan': return '大创广场 > 成员招募';
      case '/dachuang/saishi': return '大创广场 > 赛事信息';
      case '/dachuang/zhushou': return '大创广场 > 创新助手';
      case '/dachuang/luntan': return '大创广场 > 社区论坛';
      case '/shuju/xiangqing': return '数据广场 > 正文';
      case '/moxing/xiangqing': return '模型广场 > 正文';
      case '/dachuang/xiangqing': return '大创广场 > 项目展示 > 正文';
      case '/dachuang/saishi/xiangqing': return '大创广场 > 赛事信息 > 正文';
      case '/dachuang/zhaomu/xiangqing': return '大创广场 > 成员招募 > 正文';
      default: return '广场';
    }
  };
  const showModal = () => {
    setIsModalVisible(true); // 显示模态框
  };

  const handleCancel = () => {
    setIsModalVisible(false); // 关闭模态框
  };
  const renderContent = (): React.ReactNode => {
    const pathsWithDetails = [
        '/moxing', 
        '/shuju', 
        '/yingyong', 
        '/zujian', 
        '/dachuang', 
        '/dachuang/chengyuan', 
        '/dachuang/saishi', 
        '/dachuang/zhushou', 
        '/dachuang/luntan',
    ];

    if (pathsWithDetails.includes(location.pathname)) {
      const titleParts = getTitle().split(' > ');
      const isDachuang = location.pathname.startsWith('/dachuang') || location.pathname === '/shuju/xiangqing' || location.pathname === '/moxing/xiangqing' || location.pathname === '/dachuang/xiangqing';

      return (
        <>
          <div className='top-menu'>
            <h1>
              {isDachuang ? (
                <>
                  {titleParts.slice(0, -1).map((part, index) => (
                    <React.Fragment key={index}>
                      <span style={{ color: '#A0A0A0' }}>{part}</span>
                      <span style={{ color: '#A0A0A0', margin: '0 1.25rem' }}>{'>'}</span>
                    </React.Fragment>
                  ))}
                  <span>{titleParts[titleParts.length - 1]}</span>
                </>
              ) : (
                getTitle()
              )}
            </h1>
            <div className="search-bar">
              <p style={{ margin: '0 0' }}>排序：最热 ▼</p>
              <p style={{ margin: '0 1.25rem' }}>筛选：全部 ▼</p>
              <Search placeholder="搜索组件关键词" style={{ width: 240 }} />
              {buttonTextMap[location.pathname] && (
                <Button type="primary" className='start-chat-button' onClick={buttonTextMap[location.pathname] === '我要招募' ? showModal : undefined}>{buttonTextMap[location.pathname]}</Button>
              )}
            </div>
          </div>
          <div className="category-menu">
            {categoriesMap[location.pathname]?.slice(0, 10).map((category, index) => (
              <Button
                key={index}
                type={selectedCategory === category ? 'primary' : 'default'}
                style={{ borderColor: 'white', borderRadius: '0rem' }}
                onClick={() => handleCategoryClick(category)}
              >
                {category}
              </Button>
            ))}
            <Dropdown overlay={menu}>
              <Button style={{ borderColor: 'white', borderRadius: '0rem' }}>
                更多 <DownOutlined />
              </Button>
            </Dropdown>
          </div>
          <div>
          {isModalVisible && <AddchengyuanForm isVisible={isModalVisible} onClose={handleCancel} />}
          </div>
        </>
      );
    }

    return (
      <div className='breadcrumb' style={{ marginBottom: '1rem' }}>
        <div style={{ fontSize: '1.5625rem', marginTop: '1.25rem' }}>
          {getTitle().split(' > ').slice(0, -1).map((part, index) => (
            <React.Fragment key={index}>
              <span style={{ color: '#A0A0A0' }}>{part}</span>
              <span style={{ color: '#A0A0A0', margin: '0 1.25rem' }}>{'>'}</span>
            </React.Fragment>
          ))}
          <span>{getTitle().split(' > ').pop()}</span>
        </div>
      </div>
    );
  };

  return (
    <div className="component-market">
      {renderContent()}
      {children}
    </div>
  );
};

export default ComponentMarket;
